<%@ page contentType="text/html;charset=UTF-8" %>
<%@ include file="include/header.jsp" %>
<head>
    <script src="${pageContext.request.contextPath}/js/jquery-color-2.1.2.js"></script>
    <script src="${pageContext.request.contextPath}/js/fore/fore_home.js"></script>
    <link href="${pageContext.request.contextPath}/css/fore/fore_home.css" rel="stylesheet"/>
    <title>mall 商城</title>
</head>
<body>
<nav>
    <%@ include file="include/navigator.jsp" %>
    <div class="header">
        <img src="${pageContext.request.contextPath}/images/fore/WebsiteImage/HomeLogoA.png">
        <div class="mallSearch">
            <form action="${pageContext.request.contextPath}/product" method="get">
                <div class="mallSearch-input">
                    <input class="header_search_input" type="text" name="productName" placeholder="搜索商品"
                           maxlength="50">
                    <input class="header_search_button" type="submit" value="搜索">
                </div>
            </form>
            <ul>
                <c:forEach items="${requestScope.categoryList}" var="category" varStatus="i">
                    <c:if test="${i.index<9}">
                        <li>
                            <a href="${pageContext.request.contextPath}/product?categoryId=${category.categoryId}"<c:if test="${i.index % 2 != 0}"> style="color: #FF0036"</c:if>>
                                    ${fn:substring(category.categoryName,0,fn:indexOf(category.categoryName,' /'))}
                            </a>
                        </li>
                    </c:if>
                </c:forEach>
            </ul>
        </div>
    </div>

</nav>
<div class="banner">
    <c:forEach var="picNum" begin="42" end="47"  varStatus="i">
        <img src="${pageContext.request.contextPath}/images/fore/WebsiteImage/banner/${picNum}.jpg" id="banner${i.count}" <c:if test="${i.count == 1}">style="display: block;"</c:if> />
    </c:forEach>
</div>
<div class="banner_main">
    <ul class="banner_nav">
        <c:forEach items="${categoryList}" var="category">
            <li data-toggle="${category.categoryId}" data-status="">
                <img src="${pageContext.request.contextPath}/images/fore/WebsiteImage/small/${category.categoryId}.png" onerror="this.src='/images/fore/WebsiteImage/small/16.png'">
                <a href="${pageContext.request.contextPath}/product?categoryId=${category.categoryId}">${category.categoryName}</a>
            </li>
        </c:forEach>
    </ul>
    <ul class="banner_slider">
        <li id="slider_1" style="background: rgba(255,255,255,0.4)"></li>
        <li id="slider_2"></li>
        <li id="slider_3"></li>
        <li id="slider_4"></li>
        <li id="slider_5"></li>
        <li id="slider_6"></li>
    </ul>

</div>
<div class="banner_do">
    <div class="banner_goods">
        <c:forEach items="${categoryList}" var="category">
            <c:if test="${fn:length(category.productList)>0}">
                <div class="banner_goods_type">
                    <div class="banner_goods_title">
                        <span></span>
                        <p>${category.categoryName}</p>
                    </div>
                    <a href="${pageContext.request.contextPath}/product?categoryId=${category.categoryId}"><img
                            class="banner_goods_show"
                            src="images/fore/WebsiteImage/show/${category.categoryId}.jpg"  onerror="this.src='images/fore/WebsiteImage/show/16.jpg'"></a>
                    <div class="banner_goods_items">
                        <c:forEach items="${category.productList}" var="product" varStatus="i">
                            <c:if test="${i.index<8}">
                                <div class="banner_goods_item">
                                    <a href="product/${product.productId}" class="goods_link"></a>
                                    <img src="${product.productSinglePicList[0].productimageSrc}">
                                    <a href="product/${product.productId}"
                                       class="goods_name">${product.productName}</a>
                                    <span class="goods_price">￥${product.productSalePrice}</span>
                                </div>
                            </c:if>
                        </c:forEach>
                    </div>
                </div>
            </c:if>
        </c:forEach>
    </div>
</div>
<%@ include file="include/footer.jsp" %>
</body>